<template>
  <div class="site-wrapper site-page--login">
    <div class="site-content__wrapper">
      <div class="site-content">
        <div class="brand-info">
          <h2 class="brand-info__text">{{ this.systemName }}</h2>
          <p class="brand-info__intro">{{ this.introduce }}</p>
        </div>
        <div class="login-main">
          <h3 class="login-title">用户登录</h3>
          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
            <el-form-item prop="userName">
              <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="captcha">
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-input v-model="dataForm.captcha" placeholder="验证码">
                  </el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
                  <img :src="captchaPath" @click="getCaptcha()" alt="">
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getUUID,clearLoginInfo } from '@/utils'
  export default {
    data () {
      return {
        systemName: '',
        introduce: '',
        dataForm: {
          userName: '',
          password: '',
          uuid: '',
          captcha: ''
        },
        dataRule: {
          userName: [
            { required: true, message: '帐号不能为空', trigger: 'blur'},{ max: 15, message: '长度超过限制', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur'},{ max: 15, message: '长度超过限制', trigger: 'blur' }
          ],
          captcha: [
            { required: true, message: '验证码不能为空', trigger: 'blur'},{ max: 6, message: '长度超过限制', trigger: 'blur' }
          ]
        },
        captchaPath: ''
      }
    },
    computed: {
      token: {
        get () { return this.$store.state.user.token },
        set (val) { this.$store.commit('user/updateToken', val) }
      }
    },
    created () {
      clearLoginInfo()
      this.getSystemName()
      this.getCaptcha()
    },
    methods: {
      // 提交表单
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/sys/login'),
              method: 'post',
              data: this.$http.adornData({
                'username': this.dataForm.userName,
                'password': this.dataForm.password,
                'userType': 1,
                'uuid': this.dataForm.uuid,
                'captcha': this.dataForm.captcha
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                // 存进store
                this.token = data.data.token
                this.$cookie.set('token', data.data.token)
                // 存进lockr
                // Lockr.set("usertoken",data.token)
                this.$router.replace({ name: 'home' })
              } else {
                this.getCaptcha()
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      // 获取验证码
      getCaptcha () {
        this.dataForm.uuid = getUUID()
        this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)
      },
      getSystemName () {
        this.$http({
          url: this.$http.adornUrl(`/sys/config/systemName`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.systemName = data.data.systemName
            this.introduce = data.data.introduce
            // 存进lockr
            Lockr.set("systemName",data.data.systemName)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .site-wrapper.site-page--login {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    &:before {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      content: "";
      background-image: url(~@/assets/img/lain_index.png);
      background-size: 100% 100%
    }
    .site-content__wrapper {
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: transparent;
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    .site-content {
      position: relative;
    }
    .brand-info {
      text-align: center;
      color: #fff;
    }
    .brand-info__text {
      font-size: 26px;
      font-weight: 200;
      text-transform : uppercase;
    }
    .brand-info__intro {
      // margin: 0px 25px;
      font-size: 16px;
      line-height: 1.58;
      opacity: .6;
    }
    .login-main {
      padding: 10px 60px 10px;
      width: 470px;
      height: 338px;
      min-height: 100px;
      background-color: #fff;
      text-align: center;
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
      background-color: rgba(240, 255, 255, 0.5);
    }
    .login-title {
      font-size: 16px;
    }
    .login-captcha {
      overflow: hidden;
      > img {
        width: 100%;
        cursor: pointer;
      }
    }
    .login-btn-submit {
      width: 100%;
      margin-top: 15px;
    }
  }
</style>
